<template>
	<view class="box1">
		<view class=""><Title :txt="'修改邮箱'" :showback="true"></Title></view>
		<view class="">
			<view class="dash1 fcs mgt20"></view>
			<view class="dash fsc"></view>
			<view class="itembox mgt24 fsc border">
				<view class="item fcs"><view class="f16">邮箱</view></view>
				<view class="f14 fse">
					<input disabled   style="margin-right: 24rpx;width: 370rpx;" placeholder-style="color:#ddd;" class="f14"  placeholder="请输入邮箱" v-model="email" />
					<button class="f12" :class="[!btnfalse1?'buttonable':'buttondisable','f12']" :disabled="btnfalse1" @click="getTelCode">{{codeText1}}</button>
				</view>
			</view>
			<view class="itembox mgt24 fsc border">
				<view class="item fcs"><view class="f16">验证码</view></view>
				<view class="f14 fsc"><input type="text" placeholder-style="color:#ddd;" class="f14" maxlength="11" placeholder="请输入验证码" v-model="emailcode" /></view>
			</view>
		<view class="itembox mgt24 fsc border">
			<view class="item fcs"><view class="f16">手机号</view></view>
			<view class="f14 fse">
				<input disabled   style="margin-right: 24rpx;" placeholder-style="color:#ddd;"  placeholder="17625290042" v-model="tel" />
				<button :class="[!btnfalse2?'buttonable':'buttondisable','f12']" :disabled="btnfalse2" @click="getEmailCode" class="f12">{{codeText2}}</button>
			</view>
		</view>
			<view class="itembox mgt24 fsc border">
				<view class="item fcs"><view class="f16">验证码</view></view>
				<view class="f14 fsc"><input type="text" placeholder-style="color:#ddd;" class="" maxlength="11" placeholder="请输入验证码" v-model="telcode" /></view>
			</view>
			<view class="itembox mgt24 fsc border">
				<view class="item fcs"><view class="f16">新邮箱</view></view>
				<view class="f14 fse">
					<input type="text" style="margin-right: 24rpx;width: 370rpx;" placeholder-style="color:#ddd;"  placeholder="请输入邮箱号" v-model="newemail" />
					<button class="f12" :class="[!btnfalse3?'buttonable':'buttondisable','f12']" :disabled="btnfalse3" @click="getNewtelCode">{{codeText3}}</button>
				</view>
			</view>
			<view class="itembox mgt24 fsc border">
				<view class="item fcs"><view class="f16">验证码</view></view>
				<view class="f14 fsc"><input type="text" placeholder-style="color:#ddd;" maxlength="11" placeholder="请输入验证码" v-model="newemailcode" /></view>
			</view>
		</view>
		<view class="mysubmit whitecolor f16" @click="modefiyemail">提交</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [{ name: '提币', number: -25.0, time: '2020.09.29 15:04:51' }],
			status: 0,
			active: 2,
			email:"",
			emailcode:"",
			tel:"",
			telcode:"",
			newemail:"",
			newemailcode:"",
			btnfalse1: false,
			btnfalse2: false,
			btnfalse3: false,
			intdisabled: false,
			 count1:60,
			 count2:60,
			 count3:60,
			 codeText1:"获取验证码",
			 codeText2:"获取验证码",
			 codeText3:"获取验证码",
		};
	},
	onLoad() {
		
	},
	onShow() {
		this.$http.post('user.userInfo').then(res=>{
			this.tel=res.data.phone
			this.email=res.data.email
		})
	},
	methods: {
		getTelCode(){
			var that=this
				let params = {
					type:"email"
				};
			that.$http.post('user.restLoginword',params,{ isAuth: true, tipConfig: { isLoading: false } }).then(res=>{
				that.disabled = true;
				that.intdisabled = false;
				that.btnfalse1 = true;
				clearInterval(that.time);
				that.time = setInterval(() => {
					that.count1 -= 1;
					that.codeText1 = that.count1 + 's后获取';
					if (that.count1 === 0) {
						that.count1 = 60;
						that.disabled = false;
						that.btnfalse1 = false;
						that.codeText1 = '获取验证码';
						clearInterval(that.time);
					}
				}, 1000);
			})
		},
		getEmailCode(){
			var that=this
			if(!that.emailcode){
				uni.showToast({
					title: '请输入邮箱验证码',
					icon: 'none'
				});
				return false;
			}
			
				let params = {
					type:"sms"
				};
			that.$http.post('user.restLoginword',params,{ isAuth: true, tipConfig: { isLoading: false } }).then(res=>{
				that.disabled = true;
				that.intdisabled = false;
				that.btnfalse2 = true;
				clearInterval(that.time1);
				that.time1 = setInterval(() => {
					that.count2 -= 1;
					that.codeText2= that.count2 + 's后获取';
					if (that.count2 === 0) {
						that.count2 = 60;
						that.disabled = false;
						that.btnfalse2 = false;
						that.codeText2 = '获取验证码';
						clearInterval(that.time1);
					}
				}, 1000);
			})
		},
		getNewtelCode(){
			var that=this
			if(!that.telcode){
				uni.showToast({
					title: '请输入手机验证码',
					icon: 'none'
				});
				return false;
			}
			if(!that.newemail){
				uni.showToast({
					title: '请输入邮箱',
					icon: 'none'
				});
				return false;
			}
			var patten = /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
							if(!patten.test(that.email)){
								uni.showToast({
									title: '请输入正确邮箱格式',
									icon: 'none'
								});
								return false;
							}
			
				let params = {
					email:that.newemail
				};
			that.$http.post('login.sendEmailCode',params,{ isAuth: true, tipConfig: { isLoading: false } }).then(res=>{
				that.disabled = true;
				that.intdisabled = false;
				that.btnfalse3 = true;
				clearInterval(that.time2);
				that.time2 = setInterval(() => {
					that.count3-= 1;
					that.codeText3= that.count3 + 's后获取';
					if (that.count3 === 0) {
						that.count3 = 60;
						that.disabled = false;
						that.btnfalse3 = false;
						that.codeText3 = '获取验证码';
						clearInterval(that.time2);
					}
				}, 1000);
			})
		},
		modefiyemail(){
			if(!this.newemailcode){
				uni.showToast({
					title: '请输入邮箱验证码',
					icon: 'none'
				});
				return false;
			}
			let params={
				emailCode:this.emailcode,
				smsCode:this.telcode,
				newEmail:this.newemail,
				newEmailCode:this.newemailcode
			}
			this.$http.post('user.updateEmail',params,{ isAuth: true, tipConfig: { isLoading: false } }).then(res=>{
					if(res.code==200){
						uni.showToast({
							title: '修改邮箱成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.reLaunch({
								url:"./my"
							})
						}, 500);
					}
			})
		}
	}
};
</script>

<style lang="less">
	navigator:active{
		color: #fff;
	}
page {
	background-color: #fff;
}
body,
html {
	background-color: #fff;
}
.box1 {
	padding-bottom: 80rpx;
	.list {
		width: 642rpx;
		height: 252rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 24rpx;
		margin-left: auto;
		margin-right: auto;
		padding: 36rpx;
		position: relative;
		.po {
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}
	.dash1 {
		padding: 0 54rpx;

		image {
			width: 36rpx;
			height: 36rpx;
		}
		.small {
			width: 116rpx;
			height: 2rpx;
			background-color: #dbdcdd;
		}
	}
	.dash {
		width: 100%;
		height: 16rpx;
		background-color: #f3f5f9;
	}
	.itembox {
		width: 690rpx;
		padding: 0 0rpx 36rpx 0rpx;
		border-bottom: 2rpx solid #ccc;
		margin-left: auto;
		margin-right: auto;
	.buttonable{
		width: 180rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		opacity: 1;
		background: #1372df;
		border-radius: 6rpx;
		color: #fff;
	}
	.buttondisable {
		width: 180rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		opacity: 1;
		background: #efefef;
		border-radius: 6rpx;
		color: #6d7278;
	}
		input {
			text-align: right;
		}
	}
	.end {
	}
}
.mysubmit {
	width: 690rpx;
	background-color: #1372df;
	text-align: center;
	height: 88rpx;
	line-height: 88rpx;
	margin-top: 60rpx;
	margin-left: auto;
	margin-right: auto;
}
</style>
